<template>
  <view class="dropDown" @click="handleBlank">
    <view v-show="isshowUp === '分类'" class="cetetory">
      <view class="classify">
        <view>
          <view class="left">
            <view v-for="item in industryList" :key="item.id" @click="changeClassfiy(item)"
              :class="industryId == item.id ? 'active' : ''">{{ item.label }}
            </view>
          </view>
          <view class="right">
            <view v-for="item in secondList" :key="item.id" class="second-item">
              <view class="post-name">{{ item.label }}</view>
              <view class="post-num">
                <view v-for="i in item.children" :key="i.id" @click="changePost(i)"
                  :class="activeList.indexOf(i.id) != -1 ? 'active' : 'post'">
                  <text class="label">{{ i.label }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="c_fixd"></view> -->
      </view>
      <!-- 底部取消确认按钮 -->
      <view class="btn">
        <view class="cancel" @click="handleCancel">取消</view>
        <view class="confirm" @click="handleConfirm">确认</view>
      </view>
    </view>
    <view v-show="isshowUp === '排序'" class="sort">
      <view v-for="item in srotArr" :key="item.value" @click="handleSort(item)">
        <text>{{ item.label }}</text>
        <icon type="success" size="16" color="#55BD76" v-if="sortType === item.value"></icon>
      </view>
      <!-- 底部取消确认按钮 -->
      <view class="btn">
        <view class="cancel" @click="handleCancel">取消</view>
        <view class="confirm" @click="handleConfirm">确认</view>
      </view>
    </view>
    <view v-show="isshowUp === '筛选'" class="select">
      <view>
        <!-- 薪资范围 -->
        <view>
          <view class="titleText">薪资范围</view>
          <view>
            <mySlider :minValue="minValue" :maxValue="maxValue" :step="1" :fillValue="50" inactiveColor="#000"
              @move="move" @down="down" @up="up" />
          </view>
          <view class="slider">
            <view class="sliderLeft">{{ minValue }}</view>
            <view class="sliderRight">{{ maxValue }}</view>
          </view>
          <view class="price">
            <view v-for="(item, index) in priceArr" :key="index" @click="changeSalary(index, item)"
              :class="salary === index ? 'active' : ''">{{ item.label }}</view>
          </view>
        </view>
        <!-- 学历 -->
        <view class="degree">
          <view class="titleText">学历</view>
          <view class="price">
            <view v-for="item in degreeArr" :key="item.dictValue" @click="changePrice(item.dictValue)" :class="
              educationTypes.indexOf(item.dictValue) != -1 ? 'active' : ''
            ">{{ item.dictLabel }}</view>
          </view>
        </view>
        <view class="degree">
          <view class="titleText titleText1">企业规模</view>
          <view class="price">
            <view v-for="item in expensiveArr" :key="item.dictValue" @click="changeEnterprise(item.dictValue)" :class="
              enterpriseScales.indexOf(item.dictValue) != -1 ? 'active' : ''
            ">{{ item.dictLabel }}</view>
          </view>
        </view>
        <!-- 底部取消确认按钮 -->
        <view class="btn">
          <view class="cancel" @click="handleCancel">取消</view>
          <view class="confirm" @click="handleConfirm">确认</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDictType, industryAllTree, industryTree } from "@/api/common.js";
import mySlider from "@/components/s-region-slider/s-region-slider.vue";

export default {
  props: {
    isshowUp: String
  },
  components: {
    mySlider
  },
  data() {
    return {
      salary: '',
      secondList: [],
      industryId: "",
      startSalary: '',
      endSalary: '',
      industryList: [],
      postList: [],
      activeList: [],
      educationTypes: [],
      enterpriseScales: [],
      srotArr: [
        { value: 1, label: "最新优先" },
        { value: 2, label: "薪资优先" },
        { value: 3, label: "距离优先" },
      ],
      sortType: 1,
      sliderValue: 50,
      priceArr: [
        { value: [null, "3000"], label: "3千以下" },
        { value: ["3000", "5000"], label: "3-5千" },
        { value: ["5000", "8000"], label: "5-8千" },
        { value: ["8000", "12000"], label: "0.8-1.2万" },
        { value: ["12000", "18000"], label: "1.2-1.8万" },
        { value: ["18000", null], label: "1.8万以上" },
      ],
      degreeArr: [],
      expensiveArr: [],

      // 滑动条参数
      minValue: 0,
      maxValue: 0,
      salaryActive: ''
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) { },
  async onShow() { },
  onReady() { },
  mounted() {
    this.handleIndustry();
    this.handleDictType();
    let obj = uni.getStorageSync("params");
    if (obj) {
      if (uni.getStorageSync("activeList") || !uni.getStorageSync("activeList").length) {
        obj.industryId = uni.getStorageSync("activeList") || []
      }
      console.log(obj, "obj");
      this.activeList = obj.industryId; // 岗位id
      this.sortType = obj.sortType; // 排序
      this.startSalary = obj.startSalary; // 薪资范围-起始
      this.endSalary = obj.endSalary; // 薪资范围-结束
      this.educationTypes = obj.educationTypes; // 学历
      this.enterpriseScales = obj.enterpriseScales; // 企业规模
      this.salary = obj.salary;
      if (!this.salary) {
        this.minValue = obj.startSalary / 1000;
        this.maxValue = obj.endSalary / 1000;
      }
    } else {
      this.activeList = uni.getStorageSync("activeList") || []
    }
  },
  methods: {
    handleBlank(e) {
      console.log(2);
      if (e.target === this.$el) {
        console.log(1);
      }
    },

    // 分类栏左侧并且获取二级名称
    changeClassfiy(e) {
      this.industryId = e.id;
      industryAllTree(this.industryId).then((res) => {
        if (res.code == 200) {
          this.secondList = res.data; // 获取二级名称-三级岗位
        }
      });
    },

    // 获取岗位数据
    changePost(item) {
      // 多选岗位
      console.log(item, "岗位");
      // this.activeList = item.id;
      if (this.activeList.indexOf(item.id) == -1) {
        this.activeList.push(item.id); // 选中
      } else {
        this.activeList.splice(this.activeList.indexOf(item.id), 1); // 取消
      }
    },

    // 数据字典
    handleDictType() {
      // 学历
      getDictType("wxb_education_type").then((res) => {
        if (res.code == 200) {
          this.degreeArr = res.data;
        }
      });
      // 企业规模
      getDictType("wxb_enterprise_scale").then((res) => {
        if (res.code == 200) {
          this.expensiveArr = res.data;
        }
      });
    },
    // 获取行业数据一级数据
    handleIndustry() {
      industryTree().then((res) => {
        if (res.code == 200) {
          this.industryList = res.data;
          this.industryId = this.industryList[0]?.id;
          this.changeClassfiy(this.industryList[0]);
        }
      });
    },

    // 选择排序
    handleSort(e) {
      this.sortType = e.value;
    },
    // 触发touchmove方法
    move(e) {
      this.minValue = e.custom.minValue;
      this.maxValue = e.custom.maxValue;

      this.startSalary = e.custom.minValue * 1000; // 薪资范围-起始
      this.endSalary = e.custom.maxValue * 1000; // 薪资范围-结束

      this.salary = null; // 点击滑动到时候取消下面点击范围数据
    },
    // 触发touchstart方法
    down(e) {
      this.minValue = e.custom.minValue;
      this.maxValue = e.custom.maxValue;

      this.startSalary = e.custom.minValue * 1000;
      this.endSalary = e.custom.maxValue * 1000;

      this.salary = null;
    },
    // 触发touchend方法
    up(e) {
      this.minValue = e.custom.minValue;
      this.maxValue = e.custom.maxValue;

      this.startSalary = e.custom.minValue * 1000;
      this.endSalary = e.custom.maxValue * 1000;

      this.salary = null;
    },
    // 薪酬
    changeSalary(index, item) {
      console.log(this.salary, index);
      if (this.salary === index) {
        this.salary = ''
        this.startSalary = ''
        this.endSalary = ''
      } else {
        this.salary = index;

        this.startSalary = item.value[0]; // 薪资范围-起始
        this.endSalary = item.value[1]; // 薪资范围-结束

        this.$nextTick(() => {
          this.minValue = "0";
          this.maxValue = "0";
        });
      }
    },
    // 学历
    changePrice(item) {
      if (this.educationTypes.indexOf(item) == -1) {
        this.educationTypes.push(item); // 选中
      } else {
        this.educationTypes.splice(this.educationTypes.indexOf(item), 1); // 取消
      }
    },
    //企业规模
    changeEnterprise(item) {
      if (this.enterpriseScales.indexOf(item) == -1) {
        this.enterpriseScales.push(item); // 选中
      } else {
        this.enterpriseScales.splice(this.enterpriseScales.indexOf(item), 1); // 取消
      }
    },
    // 取消
    handleCancel() {
      // uni.setStorageSync("params", null);
      // uni.setStorageSync("activeList", null);
      this.$emit("handleCancel", false);
    },
    // 确认
    handleConfirm() {
      let obj = {
        industryId: this.activeList, // 岗位id
        sortType: this.sortType, // 排序
        startSalary: this.startSalary, // 薪资范围-起始
        endSalary: this.endSalary, // 薪资范围-结束
        educationTypes: this.educationTypes, // 学历
        enterpriseScales: this.enterpriseScales, // 企业规模
        salary: this.salary,
      };
      uni.setStorageSync("params", obj);
      uni.setStorageSync("activeList", this.activeList);
      this.$emit("handleConfirm", obj);
    },
  },
};
</script>
<style lang="scss" scoped>
.dropDown {
  width: 100vw;
  height: calc(100vh - 300rpx);
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;

  >view {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    border-radius: 0 0 24rpx 24rpx;

    .classify {
      position: absolute;
      top: 16rpx;
      left: 0;
      width: 100%;

      >view {
        display: flex;
      }

      .left {
        width: 242rpx;
        background: #d8d8d85c;
        color: #00000073;
        overflow: auto;
        height: 480rpx;
        font-size: 26rpx;

        >view {
          width: 100%;
          height: 120rpx;
          line-height: 120rpx;
          text-align: center;
        }

        .active {
          background-color: #fff;
          color: #000;
        }
      }

      .right {
        width: calc(100% - 200rpx);
        overflow: auto;
        font-size: 28rpx;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        align-content: space-between;
        height: 480rpx;

        .second-item {
          width: 100%;
        }

        .post-name {
          width: 100%;
          font-weight: 600;
          font-size: 28rpx;
          color: #000000e0;
          height: 88rpx;
          line-height: 88rpx;
          padding-left: 20rpx;
          box-sizing: border-box;
        }

        .post-num {
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
        }

        .post {
          width: auto;
          min-width: 218rpx;
          min-height: 65rpx;
          border-radius: 32rpx;
          background-color: #efefef;
          color: #868686;
          margin: 10rpx;
          font-size: 24rpx;
          color: #000000e0;
          padding: 0 8rpx;
          display: flex;
          align-items: center;
          box-sizing: border-box;

          .label {
            width: 100%;
            text-align: center;
            line-height: 40rpx;
          }
        }

        .active {
          min-width: 218rpx;
          min-height: 65rpx;
          border-radius: 32rpx;
          background-color: #ff9e24;
          color: #fff;
          margin: 10rpx;
          padding: 0 8rpx;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          font-size: 24rpx;

          .label {
            width: 100%;
            text-align: center;
            line-height: 40rpx;
          }
        }
      }
    }
  }

  .cetetory {
    height: 600rpx;
  }

  .sort {
    height: 370rpx;

    >view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 32rpx;
      padding-right: 50rpx;
      box-sizing: border-box;
      height: 90rpx;
      font-size: 28rpx;
      color: #000000e0;
    }
  }

  .select {
    height: 750rpx;
    width: 100%;
    overflow: hidden;

    >view {
      width: 100%;
      padding: 0 32rpx;
      box-sizing: border-box;
      height: 660rpx;
      overflow: auto;

      .titleText {
        font-size: 28rpx;
        color: #000000e0;
        height: 60rpx;
        line-height: 60rpx;
        margin: 10rpx 0;
      }

      .price {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        >view {
          width: 210rpx;
          height: 64rpx;
          background: #d8d8d85c;
          border-radius: 32rpx;
          text-align: center;
          line-height: 64rpx;
          margin: 8rpx;
          font-size: 24rpx;
          color: #000000e0;
        }

        .active {
          background-color: #ff9e24;
          color: #fff;
        }
      }
    }

    .degree {
      width: 100%;
      height: auto;
    }
  }

  .btn {
    display: flex;
    width: 100%;
    height: 90rpx;
    font-size: 28rpx;
    background: #fff;
    position: absolute;
    bottom: 0;

    >view {
      flex: 1;
      height: 100%;
      line-height: 92rpx;
      text-align: center;
    }

    .cancel {
      color: #00000073;
    }

    .confirm {
      color: #ff9e24;
    }
  }
}

.slider {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;

  .sliderLeft {
    margin-left: 20rpx;
  }

  .sliderRight {
    margin-right: 50rpx;
  }
}
</style>
